<template>
  <div>
    <div class="head">
      <div class="container head-content">
        <div class="head-on">
          <div class="title">
            <img
              class="number-img"
              src="../../assets/images/number-img.png"
              alt
            >
            <div class="recruitment">商家入驻</div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-content">
      <div class="container content">
        <div class="title-container">
          <div :class="[active == 1?'agreement-title':'title']">{{ title }}</div>
          <div class="step">
            <el-steps :active="active" finish-status="success">
              <el-step title="1.签订入驻协议" />
              <el-step title="2.完善公司信息" />
              <el-step title="3.完善店铺信息" />
              <el-step title="4.平台审核" />
              <el-step title="5.完成" />
            </el-steps>
          </div>
        </div>
        <!-- 签订入驻协议 -->
        <div v-if="active == 1" class="agreement-content">
          <el-input
            type="textarea"
            :rows="2"
            v-html="protocolDetail.articleContent"
          />
          <el-checkbox v-model="checked">
            <span>注册代表您同意</span>
            <span class="clause" style="color: #ff3b30ff;" v-text="protocolDetail.protocolTitle">《阿奇数用户服务条款》</span>
          </el-checkbox>
          <div class="btn-container">

            <div class="btn" @click="nextSecond(2)">下一步</div>
          </div>
        </div>
        <!-- 完善公司信息 -->
        <div v-else-if="active == 2" class="company-info public">
          <companyForm :companyForm="companyForm" @lastFirst="last" @nextThird="next" />
        </div>
        <!-- 完善店铺信息 -->
        <div v-else-if="active == 3" class="store-info public">
          <StoreForm :storeForm="storeForm" @lastSecond="last" @nextFourth="next" />
        </div>
        <!-- 平台审核 -->
        <div v-else-if="active === 4" class="platform-audit">
          <!-- 企业资料审核中，无法申请加盟 -->
          <div ref="inAudit" v-if="canApply === false" class="in-audit statue">
            <div class="platform">
              <img src="../../assets/images/in-audit.png" alt="">
              <div class="desc">很抱歉，您的企业资料申请修改正在审核中</div>
            </div>
            <div class="txt">
              <div class="wait">您申请的企业信息待审核中,请通过后再来申请加盟销售商</div>
              <div class="question">如有任何意见或者疑问，请邮件联系我们：
                <br>
                ajishu@126.com，我们将及时反馈解答。</div>
            </div>
          </div>
          <!-- 提交成功 -->
          <div ref="submit" v-if="audit === undefined && canApply === true" class="submit statue">
            <div class="platform">
              <img src="../../assets/images/audit-success.png" alt="">
              <div class="desc">提交成功，请耐心等待平台审核</div>
            </div>
            <div class="txt">
              <div class="wait">我们将在3个工作日内完成信息的审核工作，审核通过会用短信通知您，请耐心等待并注意查收短信</div>
              <div class="question">如有任何意见或者疑问，请邮件联系我们：
                <br>
                ajishu@126.com，我们将及时反馈解答。</div>
            </div>
            <div class="btn-container">
              <div class="btn" @click="finish">
                完成
              </div>
            </div>
          </div>
          <!-- 审核中 -->
          <div ref="inAudit" v-else-if="audit === true" class="in-audit statue">
            <div class="platform">
              <img src="../../assets/images/in-audit.png" alt="">
              <div class="desc">资料审核中，请耐心等待平台审核</div>
            </div>
            <div class="txt">
              <div class="wait">我们将在3个工作日内完成信息的审核工作，审核通过会用短信通知您，请耐心等待并注意查收短信</div>
              <div class="question">如有任何意见或者疑问，请邮件联系我们：
                <br>
                ajishu@126.com，我们将及时反馈解答。</div>
            </div>
          </div>
          <!-- 审核失败 -->
           <div v-else-if="audit === false" class="audit-fail statue">
            <div class="platform">
              <img src="../../assets/images/audit-fail.png" alt="" />
              <div class="desc">您的资料申请未能通过审核</div>
            </div>
            <div class="txt">
              <div class="wait" v-text="'驳回原因：' + auditReason">驳回原因：基本信息错误和证件图像有误</div>
              <div class="question">
                <span>请根据以上原因</span>
                <el-button type="text" class="blue" @click="reApply">修改基本信息和重新上传证件图片</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="platform-audit">
        <!-- 审核成功 active=5-->
        <div v-if="active === 5" class="audit-success statue">
          <div class="platform">
            <img src="../../assets/images/audit-success.png" alt="" />
            <div class="desc">恭喜您，您的入驻申请审核通过</div>
          </div>
          <div class="btn-container">
            <div class="btn" @click="toLogin">
              去管理我的店铺
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
    <advantage-item />
    <guide-item />
    <friendly-link />
    <footer-item />
  </div>
</template>
<script>
import { protocol } from '@/api/join'
import { getApplyInfo } from '@/api/join'
import AdvantageItem from '../../layout/Advantage'
import GuideItem from '../../layout/Guide'
import FriendlyLink from '../../layout/FriendlyLink'
import FooterItem from '../../layout/Footer'
import StoreForm from './component/StoreForm'
import companyForm from './component/companyForm'
export default {
  name: 'Recruitment',
  components: {
    AdvantageItem,
    GuideItem,
    FriendlyLink,
    FooterItem,
    StoreForm,
    companyForm
  },
  data() {
    return {
      active: 0,
      checked: false,
      protocolDetail: {},
      title: '阿奇数代销商户入驻协议',
      audit: undefined,
      auditReason: '', // 审核失败理由
      companyForm: {
        companyName: '',
        creditCode: '',
        corporateName: '',
        sellerAddrDetail: '',
        licence: undefined // 营业执照扫描件
      },
      storeForm: {
        categoryId: '',
        sellerName: '',
        sellIntroduct: '',
        salesman: '',
        contactPhone: '',
        code: '',
        emergcyPhone: ''
      },
      canApply: true
    }
  },
  watch: {
    active(newActive) {
      if (newActive === 1) {
        this.title = '阿奇数代销商户入驻协议'
      }
      if (newActive === 2) {
        this.title = '完善公司信息'
      }
      if (newActive === 3) {
        this.title = '完善店铺信息'
      }
      if (newActive === 4) {
        this.title = '平台审核'
      }
      if (newActive === 5) {
        this.title = '平台审核'
      }
    }
  },
  created() {
    getApplyInfo().then(response => {
      const info = response.data
      const userInfo = info.userInfo
      const sellerInfo = info.sellerInfo
      const companyApplyRecord = info.companyInfo
      if (userInfo.companyFlag && companyApplyRecord) {
        // 企业账号申请企业信息待审核中,不允许操作申请加盟销售商
        if (companyApplyRecord.status === 0) {
          // this.$message.error('您申请的企业信息待审核中,请通过后再来申请加盟销售商') // 不允许申请加盟销售商
          this.active = 4
          this.canApply = false
          return
        }
        this.companyForm.companyName = companyApplyRecord.companyName
        this.companyForm.creditCode = companyApplyRecord.companyCode
        this.companyForm.corporateName = companyApplyRecord.corporateName
        this.companyForm.sellerAddrDetail = companyApplyRecord.companyAddress
      }
      if (!sellerInfo) {
        // 未申请
        if (userInfo.companyFlag) {
          this.storeForm.contactPhone = userInfo.userPhone
        } else {
          this.storeForm.contactPhone = userInfo.userName
        }
        this.active = 1
      } else if (sellerInfo && sellerInfo.auditStatus === 3) {
        // 审核失败
        this.companyForm.companyName = sellerInfo.companyName
        this.companyForm.creditCode = sellerInfo.creditCode
        this.companyForm.corporateName = sellerInfo.corporateName
        this.companyForm.sellerAddrDetail = sellerInfo.sellerAddrDetail
        this.companyForm.licence = sellerInfo.licence ? sellerInfo.licence : sellerInfo.businessImage
        this.companyForm.licenceName = `${new Date().getTime() + Math.random()}.jpg`
        // this.form.identity = data.identity ? data.identity : data.legalRepresent
        this.companyForm.businessImage = sellerInfo.businessImage

        this.storeForm.categoryId = sellerInfo.categoryId
        this.storeForm.categoryName = sellerInfo.categoryName
        this.storeForm.sellerName = sellerInfo.sellerName
        this.storeForm.sellIntroduct = sellerInfo.sellIntroduct
        this.storeForm.salesman = sellerInfo.salesman
        this.storeForm.contactPhone = sellerInfo.contactPhone
        this.storeForm.emergcyPhone = sellerInfo.emergcyPhone

        this.auditReason = sellerInfo.auditReason
        this.active = 4
        this.audit = false
      } else if (sellerInfo && sellerInfo.auditStatus === 2) {
        // 审核通过
        this.active = 5
      } else {
        // 待审核
        this.active = 4
        this.audit = true
      }
    })
  },
  mounted() {
    protocol().then(res => {
      this.protocolDetail = res.data
    })
  },
  methods: {
    // 点击重新申请
    reApply() {
      this.audit = undefined
      this.active = 1
    },
    finish() {
      this.audit = true
    },
    nextSecond(step) {
      if (this.checked) {
        console.log(typeof this.active)
        this.active = step
      } else {
        this.$message('请勾选《阿奇数用户服务条款》')
      }
    },
    last(step) {
      this.active = step
    },
    next(step) {
      // console.log(data);
      this.active = step

      //   if (this.active++ > 4) this.active = 1;
    },
    // 点击去管理店铺
    toLogin() {
      this.$confirm('确定退出当前登录并前往商户登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.reload()
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .head {
    margin-top: 36px;
    border-bottom: 2px solid #ff3b30ff;
    .head-content {
      .head-on {
        display: flex;
        background: #ffffff;
        height: 77px;
        .title {
          margin-right: 139px;
          display: flex;
          align-items: center;
          .number-img {
            width: 151px;
            height: 36px;
            object-fit: cover;
          }
          .recruitment {
            margin-left: 33px;
            height: 36px;
            font-size: 24px;
            padding: 0 19px;
            border-left: 1px solid #e5e5e5ff;
          }
        }
      }
    }
  }
  .main-content {
    padding: 30px 0 60px 0;
    background-color: #f5f5f5;

    .content {
      background-color: #fff;
      padding: 0 15px;
      .title-container {
        height: 102px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          margin-right: 294px;
          font-size: 24px;
          color: #6b6b6bff;
        }
        .agreement-title{
          padding-left: 51px;
          margin-right: 294px;
          font-size: 24px;
          color: #6b6b6bff;
        }
        .step {
          flex: 1;
          ::v-deep .el-step__title {
            font-size: 12px;
          }
          ::v-deep .el-step__line {
            height: 4px;
          }
          ::v-deep .el-step__line-inner {
            border-width: 2px !important;
          }
        }
      }
      .agreement-content {
        padding: 0 51px 70px 51px;
        ::v-deep .el-textarea {
          width: 100%;
          // height: 383px;
        margin: 15px 0 8px 0;
        }
        ::v-deep .el-textarea__inner {
          width: 100%;
          height: 383px;
          font-size: 13px;
          border: 1px solid #707070FF;
        }
        .btn-container {
          display: flex;
          margin-top: 15px;

  //         span.clause {

  //           ::v-deep .el-checkbox__label{
  // color: #ff3b30ff!important;
  //           }
  //         }
          .btn {
            margin-left: 334px;
            width: 400px;
            height: 42px;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            background-color: #ff3b30ff;
          }
          .btn:hover {
            cursor: pointer;
          }
        }
      }
      .public {
        ::v-deep .el-input {
          width: 400px;
        }
        ::v-deep .el-form {
          margin-left: 246px !important;
          margin-top: 80px;
          margin-bottom: 60px;
        }
        ::v-deep .el-textarea {
          width: 400px;
          height: 42px;
          .el-input__count {
            color: #909399;
            background: #FFF;
            position: absolute;
            font-size: 12px;
            bottom: 5px;
            right: -50px;
          }
        }
        ::v-deep .el-form-item__content {
          width: 400px;
        }

        ::v-deep .el-textarea__inner {
          height: 42px;
        }
        ::v-deep .el-form-item {
          margin-bottom: 15px;
          width: 400px;
        }
        ::v-deep .el-form-item__error{
          top: 97%;
        }

        .condition {
          position: absolute;
          color: #c7c7cc;
          top: 5px;
          left: 103px;
        }

      }
      .platform-audit {
        margin-top: 90px;
        margin-left: 332px;

        .statue {
          width: 536px;
          .platform {
            width: 536px;
            height: 101px;
            background-color: #f8f8f8;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 48px;
              height: 48px;
              border-radius: 24px;
            }
            .desc {
              color: #8e8e93ff;
              margin-left: 16px;
            }
          }
          .txt {
            width: 536px;
            margin-top: 20px;
            color: #a7a7aaff;
            font-size: 12px;
            margin-bottom: 67px;
            // .question {
            //   width: 228px;
            // }
            .wait {
              margin-bottom: 10px;
            }
          }
          .btn-container {
            width: 536px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 134px;
            .btn {
              background-color: #ff3b30ff;
              width: 80px;
              height: 30px;
              border-radius: 4px;
              color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
        .submit{
          .btn:hover{
            cursor: pointer;
          }
        }
        .in-audit {
          /*display: none;*/
          margin-bottom: 231px;
        }
        .audit-success {
          .btn-container {
            margin-top: 68px;
            margin-bottom: 210px;
            .btn {
              width: 120px;
              height: 30px;
            }
          }
        }
        .audit-fail {
          .txt {
            margin-bottom: 247px;
            .blue {
              color: #02a9f1ff;
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
  ::v-deep .el-upload--picture-card {
    width: 87px;
    height: 53px;

    display: flex;
  }
</style>
